<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">车牌号:</p>
			</el-col>
			<el-col :span="3">
				<el-input v-model="plateNum"
				          placeholder="请输入车牌号"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">VIN:</p>
			</el-col>
			<el-col :span="3">
				<el-input v-model="vin"
				          placeholder="请输入VIN"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">任务大类:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="taskPtype" size='small' placeholder="任务大类" clearable @change="taskStatusChange">
							<el-option v-for="item in  taskPTypeCombo" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
			</el-col>
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">任务小类:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="taskCtype" size='small' placeholder="任务细类" clearable>
							<el-option v-for="item in  taskCTypeCombo" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
			</el-col>
			<el-col :span="2">
				<el-button type="primary"
				           @click="reminderQuery"
				           size="small">查询</el-button>
			</el-col>
			<el-col :span="6"
			        style="text-align: right;margin-left:-40px;">
				<el-button type="primary"
				           @click="reminderAdd"
				           size="small">新增</el-button>
				<el-button type="primary"
				           @click="reminderDelte"
				           size="small">删除</el-button>
				<el-button type="primary"
				           @click="dbClick(quanxianId)" 
				           size="small" v-if="multipleSelection.length==1">权限处理</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData.dataList"
		          border
		          @selection-change="handleSelectionChange"
		          @row-dblclick="dbClick">
			<el-table-column type="selection"
			                 width="60">
			</el-table-column>
			<!--<el-table-column type="index" width="70" label="序号">
								</el-table-column>-->
			<el-table-column prop="ownerName"
			                 label="车主姓名">
			                 <template scope="scope">
							<el-button type="text"
							           @click="dbClick(scope.row)">{{scope.row.ownerName}}</el-button>
						</template>
			</el-table-column>
			<el-table-column prop="defName"
			                 label="权限">
			</el-table-column>
			<el-table-column prop="plateNum"
			                 label="车牌号"
			                 width="200">
			</el-table-column>
			<el-table-column prop="vin"
			                 label="VIN"
			                 width="300">
			</el-table-column>
			<el-table-column prop="lastMaintainDate"
			                 label="上次维修日期"
			                 width="150"
			                 :formatter="timeFormate"
			                 align="center">
			</el-table-column>
			<!--<el-table-column prop="status" label="状态" >
								</el-table-column>-->
			<!--<el-table-column prop="" label="操作" width="100" fixed="right">
	
									<template scope="scope">
	
										<el-tooltip effect="light" content="提醒" placement="top">
											<el-button type="primary" size="mini" @click.native.prevent="openRemind(scope.$index)">提醒</el-button>
										</el-tooltip>
									</template>
								</el-table-column>-->
		</el-table>
		<el-pagination small
		               @size-change="handleSizeChange"
		               @current-change="handleCurrentChange"
		               :current-page="CurentPage"
		               :page-sizes="page.pageSizes"
		               :page-size="page.pageSize"
		               layout=" total,prev, pager, next"
		               :total="tableData.total">
		</el-pagination>
		<!--
					        	作者：1040117458@qq.com
					        	时间：2017-03-23
					        	描述：新增界面
					        -->
		<el-dialog tittl="关闭提醒"
		           v-model="carFormShow">
		    <el-row :gutter="24">
		    <el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">任务大类:</p>
			</el-col>       
			<el-col :span="5" style="margin-left: 10px;">
				<el-select v-model="taskPtype2" size='small' placeholder="任务大类" clearable @change="taskStatusChange2">
							<el-option v-for="item in  taskPTypeCombo" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
			</el-col>
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">任务小类:</p>
			</el-col>
			<el-col :span="5" style="margin-left: 10px;">
				<el-select v-model="taskCtype2" size='small' placeholder="任务小类" clearable>
							<el-option v-for="item in  taskCTypeCombo" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
			</el-col>
			</el-row>
		    <el-row :gutter="24">
		    <el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">车牌号:</p>
			</el-col>       
			<el-col :span="7">
				<el-input v-model="PlateNum"
				          placeholder="请输入车牌号"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">VIN:</p>
			</el-col>
			<el-col :span="7">
				<el-input v-model="Vin"
				          placeholder="请输入VIN"
				          size="small">
				</el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="primary"
				           @click="xinzengQuery"
				           size="small"
				           right>查询</el-button>
			</el-col>
			</el-row>
			<el-table :data="carData.dataList"
				       @selection-change="handleSelectionChange2"
			          border>
				<el-table-column type="selection"
			                 width="60">
			</el-table-column>
				<el-table-column property="ownerName"
				                 label="车主姓名"
				                 width="300"></el-table-column>
				<el-table-column property="plateNum"
				                 label="车牌号"
				                 width="150"></el-table-column>
				<el-table-column property="vin"
				                 label="VIN"
				                 width="200"></el-table-column>
				<el-table-column property="lastMaintainDate"
				                 label="上次维修日期"
				                 :formatter="timeFormate"
				                 width="150"></el-table-column>
				<!--<el-table-column prop=""
				                 label="操作"
				                 width="120"
				                 fixed="right">
					<template scope="scope">
						<el-tooltip effect="light"
						            content="关闭提醒"
						            placement="top">
							<el-button type="primary"
							           size="mini"
							           @click.native.prevent="closeRemind(scope.$index)">关闭提醒</el-button>
						</el-tooltip>
					</template>
				</el-table-column>-->
			</el-table>
			<el-pagination small
			               @size-change="handleSizeChange1"
			               @current-change="handleCurrentChange1"
			               :current-page="CurentPage1"
			               :page-sizes="page.pageSizes"
			               :page-size="page.pageSize"
			               layout=" total,prev, pager, next"
			               :total="carData.total">
			</el-pagination>
			<div slot="footer"
			     class="dialog-footer">
				<el-button type="primary"
				           size="small"
				           @click="backButton">取消</el-button>
				<el-button type="primary"
				           size="small"
				           @click="save">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog tittl="关闭提醒"
		           v-model="taskFormShow">
			<el-table :data="taskData.dataList"
			          border>
				<el-table-column type="index"
			                 width="70"
			                 label="序号">
			</el-table-column>
				<el-table-column property="ownerName"
				                 label="车主姓名"
				                 width="300"></el-table-column>
				<el-table-column property="defName"
				                 label="权限"
				                 width="150"></el-table-column>
				<el-table-column property="plateNum"
				                 label="车牌号"
				                 width="150"></el-table-column>
				<el-table-column property="vin"
				                 label="VIN"
				                 width="200"></el-table-column>
				<el-table-column property="lastMaintainDate"
				                 label="上次维修日期"
				                 :formatter="timeFormate"
				                 width="150"></el-table-column>
				<el-table-column prop=""
				                 label="操作"
				                 width="120"
				                 fixed="right">
					<template scope="scope">
						<el-tooltip effect="light"
						            content="删除"
						            placement="top">
							<el-button type="primary"
							           size="mini"
							           @click.native.prevent="taskDelte(scope.$index)">删除</el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination small
			               @size-change="handleSizeChange2"
			               @current-change="handleCurrentChange2"
			               :current-page="CurentPage2"
			               :page-sizes="page.pageSizes"
			               :page-size="page.pageSize"
			               layout=" total,prev, pager, next"
			               :total="taskData.total">
			</el-pagination>
			<div slot="footer"
			     class="dialog-footer">
				<el-button type="primary"
				           size="small"
				           @click="taskFormShow = false">取消</el-button>
				<el-button type="primary"
				           size="small"
				           @click="save">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import moment from 'moment'
export default {
	data: function () {
		return {
			taskFormShow:false,
			taskPtype2:'',
			taskCtype2:'',
			//页码数001
			CurentPage2:1,
			CurentPage: 1,
			//新增界面页码数
			CurentPage1: 1,
			//每页的数量
			page: this.page,
			activeName: ['1'],
			taskData:{
				total:0,
				dataList:[]
			},
			//查询条件
			plateNum: '',
			vin: '',
			PlateNum: '',
			Vin: '',
			taskPtype:'',
			taskCtype:'',
			//任务大类
				taskPTypeCombo: [{
					value: 'by',
					label: '保养'
				}, {
					value: 'bx',
					label: '保险'
				}, {
					value: 'ls',
					label: '流失'
				}, {
					value: 'ga',
					label: '关爱'
				}, {
					value: 'qt',
					label: '其他'
				}],
				//任务小类
				taskCTypeCombo: [],
				//任务状态
				bxChild: [{
					value: 'cnj',
					label: '次年交强险'
				}, {
					value: 'cns',
					label: '次年商业险'
				}, {
					value: 'xbj',
					label: '交强险续保'
				}, {
					value: 'xbs',
					label: '商业险续保'
				}, {
					value: 'hyt',
					label: '保险活跃'
				}, {
					value: 'fhyt',
					label: '保险非活跃'
				}, {
					value: 'jdj',
					label: '交强险接待'
				}, {
					value: 'jds',
					label: '商业险接待'
				}],
				gaChild: [{
					value: 'sr',
					label: '生日'
				}, {
					value: 'ns',
					label: '年审'
				}, {
					value: 'zbt',
					label: '质保'
				}, {
					value: 'ybt',
					label: '延保'
				}],
				zdyChild: [{
					value: 'zdy',
					label: '自定义'
				}],
				lsChild: [{
						value: '6',
						label: '六个月'
					}, {
						value: '7',
						label: '七个月'
					}, {
						value: '8',
						label: '八个月'
					}, {
						value: '9',
						label: '九个月'
					},
					{
						value: '10',
						label: '十个月'
					},
					{
						value: '11',
						label: '十一个月'
					},
					{
						value: '12',
						label: '十二个月'
					}
				],
				byChild: [{
					value: 'sy_mbr',
					label: '新车首月'
				}, {
					value: 'sb_mbr',
					label: '首保'
				}, {
					value: 'sb_mby',
					label: ' 首保月'
				}, {
					value: 'eb_mbr',
					label: '二保'
				}, {
					value: 'eb_mby',
					label: '二保月'
				}, {
					value: 'db_mbr',
					label: '定保'
				}, {
					value: 'db_mby',
					label: '定保月'
				}],
			//新增界面显示
			carFormShow: false,
			//表格数据
			tableData: {
				total: 0,
				dataList: []
			},
			//新增界面表单数据
			carData: {
				total: 0,
				dataList: []
			},
			//初始化表单数据
			emptyFormData: {
				ownerName: '',
				plateNum: '',
				vin: '',
				lastMaintainDate: '',
			},
			//车主车辆信息表数据
			carFormData: {
				ownerName: '',
				plateNum: '',
				vin: '',
				lastMaintainDate: '',
			},
			//选中的列
			multipleSelection: [],
			//关闭提醒选中车辆
			multipleSelection2:[],
			quanxianId:'',
			loadingVue:null,
			//暂存
			carID:'',
		}
	},
	methods: {
		/**************任务状态转换****************/
			taskStatusChange: function(value) {
				debugger;
				switch(value) {
					case "by":
						this.$data.taskCTypeCombo = this.$data.byChild;
						this.$data.taskCtype = this.$data.taskCTypeCombo[0].value;
						break
					case "bx":
						this.$data.taskCTypeCombo = this.$data.bxChild;
						this.$data.taskCtype = this.$data.taskCTypeCombo[0].value;
						break
					case "ls":
						this.$data.taskCTypeCombo = this.$data.lsChild;
						this.$data.taskCtype = this.$data.taskCTypeCombo[0].value;
						break
					case "ga":
						this.$data.taskCTypeCombo = this.$data.gaChild;
						this.$data.taskCtype = this.$data.taskCTypeCombo[0].value;
						break
					case "qt":
						this.$data.taskCTypeCombo = this.$data.zdyChild;
						this.$data.taskCtype = this.$data.taskCTypeCombo[0].value;
						break
					default:
						this.$data.taskCTypeCombo = [];
						this.$data.taskCtype = '';
						break
				}

			},
			taskStatusChange2: function(value) {
				debugger;
				switch(value) {
					case "by":
						this.$data.taskCTypeCombo = this.$data.byChild;
						this.$data.taskCtype2 = this.$data.taskCTypeCombo[0].value;
						break
					case "bx":
						this.$data.taskCTypeCombo = this.$data.bxChild;
						this.$data.taskCtype2 = this.$data.taskCTypeCombo[0].value;
						break
					case "ls":
						this.$data.taskCTypeCombo = this.$data.lsChild;
						this.$data.taskCtype2 = this.$data.taskCTypeCombo[0].value;
						break
					case "ga":
						this.$data.taskCTypeCombo = this.$data.gaChild;
						this.$data.taskCtype2 = this.$data.taskCTypeCombo[0].value;
						break
					default:
						this.$data.taskCTypeCombo = this.$data.zdyChild;
						this.$data.taskCtype2 = this.$data.taskCTypeCombo[0].value;
						break
				}

			},

		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.reminderQuery();
		}, //分页传参 结束
		//分配分页切换
		handleSizeChange1: function () { },
		//分配分页切换
		handleSizeChange2: function () { },
		//分配当前页切换
		handleCurrentChange1: function (CurentPage1) {
			this.$data.CurentPage1 = CurentPage1;
			this.xinzengQuery();
		},
		//分配当前页切换
		handleCurrentChange2: function (CurentPage1) {
			this.$data.CurentPage2 = CurentPage1;
			this.dbClick(this.$data.carID,null);
		},
		//时间解析
		timeFormate: function (row, column) {
			if (row.lastMaintainDate == "" || row.lastMaintainDate == null) return "";
			return moment(Number(row.lastMaintainDate)).format("YYYY-MM-DD");
		},
		//查询
		reminderQuery: function () {
			debugger;
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/remindClose/closePage', //url
				params: { //发送的参数
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize, //每页的数量
					//绑定 数据 加载  此处绑定的是 车牌号
					plateNum: this.$data.plateNum, //车牌号
					vin: this.$data.vin,// vin
					pcode:this.$data.taskPtype,
					code:this.$data.taskCtype,
				}
			}).then(function (resp) {
				resp.data.total = parseInt(resp.data.total);
				this.$data.tableData = resp.data;
			}, function (error) {
				// error
			})

		},
		//新增
		reminderAdd: function () {
			this.$data.PlateNum = '';
			this.$data.Vin = '';
			this.$http({
				method: "POST",
				url: this.API_ROOT + '/crm/remindClose/carPage', //url
				params: {
					start: this.$data.CurentPage1, //页码
					limit: this.page.pageSize, //每页的数量
				}
			}).then(function (resp) {
				//success
				resp.data.total = parseInt(resp.data.total);
				this.$data.carData = resp.data;
				this.$data.carFormShow = true;
			}, function (error) {
				//error
			})

		},
		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
			if(this.$data.multipleSelection.length>1){
				this.$message.error("请选择一条数据")
			}else if(this.$data.multipleSelection.length==1){
				this.$data.quanxianId=val[0];
			}
			
		},
		//复选框回调函数
		handleSelectionChange2: function (val) {
			debugger;
			this.$data.multipleSelection2 = val;
		},
		//删除关闭
		reminderDelte: function () {
			debugger;
			if (this.$data.multipleSelection.length == 1) {
				this.openRemind(this.$data.multipleSelection[0].carId)
			}
			else {
				this.$message.error("请选择一条数据")
			}

		},
		//删除关闭
		taskDelte: function (index) {
			this.$confirm('确认要取消关闭提醒吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				debugger;
				var data = this.$data.taskData.dataList[index];
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/remindClose/del',
					params: {
						id: data.id,
					}
				}).then(function (resp) {
					if (resp.data.success) {
						this.$message(resp.data.msg);
						//this.resRoleQuery(this.$data.curTreeDeptId);
						//this.$data.groupFormShow = false;
						this.dbClick(this.$data.carID,null);
					} else {
						this.$message.error(resp.data.msg);
					}
				}, function (error) {

				})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消此操作'
				});
			});
		},
		//新增界面查询
		xinzengQuery: function () {
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/remindClose/carPage', //url
				params: { //发送的参数
					start: this.$data.CurentPage1, //页码
					limit: this.$data.page.pageSize, //每页的数量
					plateNum: this.$data.PlateNum, //车牌号
					vin: this.$data.Vin,// vin
					typePcode:this.$data.taskPtype2,
					typeCcode:this.$data.taskCtype2,
				}
			}).then(function (resp) {
				resp.data.total = parseInt(resp.data.total);
				this.$data.carData = resp.data;
			}, function (error) {
				// error
			})
		},
		//返回按钮
		backButton: function () {
			this.$data.carFormShow = false;
			this.reminderQuery();
		},
		//
		dbClick:function(row, event){
			debugger;
			this.$data.carID = row;
			this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/remindClose/closePage',
					params: {
						carId: row.carId,
						start:this.$data.CurentPage2,
						limit: this.$data.page.pageSize,
					}
				}).then(function (resp) {
					debugger;
					if (resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.taskData= resp.data;
						this.$data.taskFormShow = true;
					} else {
						this.$message.error(resp.data.msg);
					}
				}, function (error) {

				})
		},
		//开启提醒按钮
		openRemind: function (index) {
			this.$confirm('确认要删除该车所有关闭任务类型吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				//var data = this.$data.tableData.dataList[index];
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/remindClose/del',
					params: {
						carId: index,
					}
				}).then(function (resp) {
					if (resp.data.success) {
						this.$message(resp.data.msg);
						this.reminderQuery();
					} else {
						this.$message.error(resp.data.msg);
					}
				}, function (error) {

				})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消此操作'
				});
			});

		},
		//关闭提醒按钮
		save: function () {
			if(this.$data.multipleSelection2.length != 0) {
			this.$confirm('确认要关闭这些车辆提醒吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$data.loadingVue = this.$loading({
								fullscreen: true,
								text: "正在导入数据，请稍候"
							});
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/remindClose/saveByType',
					body:this.$data.multipleSelection2,
					params: {
						pcode:this.$data.taskPtype2,
						code:this.$data.taskCtype2,
					}
				}).then(function (resp) {
					if (resp.data.success) {
						this.$message(resp.data.msg);
						this.$data.loadingVue.close();
						this.$data.carFormShow = false;
						//this.resRoleQuery(this.$data.curTreeDeptId);
						//this.$data.groupFormShow = false;
						this.reminderQuery();
					} else {
						this.$message.error(resp.data.msg);
						this.$data.loadingVue.close();
					}
				}, function (error) {

				})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消此操作'
				});
			});}else{
				this.$message.error("请选择数据！");
			}
		},
	},
	created: function () {
		//
		this.reminderQuery();
	}
}
</script>